<template>
  <view>
    <cu-custom bgColor="bg-cyan">
      <block slot="content">picker 选择列表</block>
    </cu-custom>
    <view class="smart-padding-wrap">
      <view class="uni-title">普通选择器</view>
      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">当前选择</view>
          <view class="uni-list-cell-db">
            <picker :range="array" :value="index" range-key="name" @change="bindPickerChange">
              <view class="uni-input">{{array[index].name}}</view>
            </picker>
          </view>
        </view>
      </view>
      
      <view class="uni-title">日期选择器</view>
      <view class="uni-list">
        <view class="uni-list-cell">
          <view class="uni-list-cell-left">当前选择</view>
          <view class="uni-list-cell-db">
            <picker mode="date" :value="date" :start="starDate" :end="endDate" @change="bindPickerChange">
              <view class="uni-input">{{date}}</view>
            </picker>
          </view>
        </view>
      </view>
      
      <view class="item uni-column">
      	
      </view>
      
    </view>
  </view>
</template>

<script>
  function getDate(type){
    const date = new Date()
    
  }
  export default{
    data(){
      return{
        array:[{name:'中国'},{name:'美国'},{name:'法国'},{name:'巴西'}],
        index:0,
        date:getDate({
          format:true
        }),
        starDate:getDate('start'),
        endDate:getDate('end'),
      }
    },
    methods:{
      bindPickerChange(e){
        console.log("显示打印结果",e.detail)
        this.index = e.detail.value
        
      }
    }
  }
</script>

<style>
</style>